<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06财务管理</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Ant Design CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.8/antd.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- Ant Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .ant-btn {
            border-radius: 6px;
        }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
        .ant-table-thead > tr > th {
            background-color: #fafafa;
        }
        .ant-card {
            border-radius: 8px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
        }
        .ant-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .ant-statistic-title {
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            margin-bottom: 4px;
        }
        .ant-statistic-content {
            color: rgba(0, 0, 0, 0.85);
            font-size: 24px;
            font-weight: 600;
        }
        .ant-tag {
            border-radius: 4px;
        }
        .ant-tabs-tab {
            padding: 8px 16px;
        }
        .ant-tabs-tab-active {
            color: #1890ff;
            font-weight: 500;
        }
        .ant-tabs-ink-bar {
            background: #1890ff;
        }
        .ant-modal-content {
            border-radius: 8px;
        }
        .ant-form-item-label > label {
            height: auto;
        }
        .ant-select-selector {
            border-radius: 6px;
        }
        .ant-input {
            border-radius: 6px;
        }
        .ant-picker {
            border-radius: 6px;
        }
        .ant-input-number {
            width: 100%;
            border-radius: 6px;
        }
        .ant-input-number-handler-wrap {
            border-radius: 0 6px 6px 0;
        }
        .chart-container {
            height: 320px;
            width: 100%;
        }
        .nav-item {
            transition: all 0.2s;
        }
        .nav-item:hover {
            background-color: rgba(24, 144, 255, 0.1);
        }
        .nav-item.active {
            background-color: rgba(24, 144, 255, 0.1);
            color: #1890ff;
            font-weight: 600;
        }
        .kpi-card {
            transition: all 0.3s;
        }
        .kpi-card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .driver-rank {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            color: white;
            font-weight: bold;
            font-size: 12px;
        }
        .rank-1 { background-color: #fbbf24; }
        .rank-2 { background-color: #9ca3af; }
        .rank-3 { background-color: #fb923c; }
        .rank-4 { background-color: #3b82f6; }
        
        /* 修复查询条件样式 */
        .query-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .query-item {
            display: inline-flex;
            align-items: center;
        }
        .custom-date-picker {
            height: 32px;
            padding: 4px 11px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            background-color: #fff;
            transition: all 0.3s;
        }
        .custom-date-picker:focus {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        .custom-select {
            height: 32px;
            padding: 4px 11px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            background-color: #fff;
            transition: all 0.3s;
        }
        .custom-select:focus {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        .custom-search {
            display: inline-flex;
            align-items: center;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            background-color: #fff;
            transition: all 0.3s;
        }
        .custom-search:focus-within {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        .custom-search input {
            border: none;
            outline: none;
            padding: 4px 11px;
            width: 200px;
        }
        .custom-search button {
            border: none;
            background: none;
            padding: 4px 8px;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.45);
        }
        .custom-search button:hover {
            color: #1890ff;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-white min-h-screen">
    <!-- 顶部标题栏 -->
    <header style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);" class="text-white py-2.5 px-6 shadow-xl">
        <div class="flex justify-between items-center">
            <div class="flex-1"></div>
            <h1 class="text-3xl font-bold flex-1 text-center tracking-wide text-white">马鞍山非急救转运调度中心</h1>
            <div class="flex-1 flex justify-end items-center space-x-4">
                <div style="background: rgba(255, 255, 255, 0.2);" class="flex items-center space-x-3 px-4 py-2 rounded-full backdrop-blur-sm">
                    <i class="fas fa-user-circle text-xl"></i>
                    <span class="font-medium">调度员 张晓丽</span>
                </div>
                <button style="transition: all 0.3s ease;" class="text-white hover:bg-white/20 p-3 rounded-full transition-all duration-300 hover:rotate-90">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);" class="shadow-lg sticky top-0 z-50">
        <div class="flex justify-center">
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-th-large text-lg" style="transition: all 0.3s ease;"></i>
                <span>调度中心</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-clipboard-list text-lg" style="transition: all 0.3s ease;"></i>
                <span>订单管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-users text-lg" style="transition: all 0.3s ease;"></i>
                <span>人员管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-ambulance text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-truck text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆状态</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-map-marked-alt text-lg" style="transition: all 0.3s ease;"></i>
                <span>实时监控</span>
            </a>
            <a href="#" class="nav-item active px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; color: #3B82F6; font-weight: 600;">
                <i class="fas fa-coins text-lg" style="transition: all 0.3s ease;"></i>
                <span>财务管理</span>
                <span style="content: ''; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);"></span>
            </a>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="w-full overflow-y-auto bg-gray-50">
        <div class="p-6">
            <!-- 二级导航栏 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
                <div class="flex space-x-8 px-6 py-3 border-b border-gray-200">
                    <div id="nav-dashboard" class="nav-item active cursor-pointer px-4 py-2 rounded-lg" onclick="switchTab('dashboard')">
                        <i class="fas fa-chart-bar mr-2"></i>财务仪表板
                    </div>
                    <div id="nav-order-stats" class="nav-item cursor-pointer px-4 py-2 rounded-lg text-gray-600" onclick="switchTab('order-stats')">
                        <i class="fas fa-dollar-sign mr-2"></i>订单收费统计
                    </div>
                    <div id="nav-vehicle-cost" class="nav-item cursor-pointer px-4 py-2 rounded-lg text-gray-600" onclick="switchTab('vehicle-cost')">
                        <i class="fas fa-car mr-2"></i>车辆运营成本
                    </div>
                    <div id="nav-income-details" class="nav-item cursor-pointer px-4 py-2 rounded-lg text-gray-600" onclick="switchTab('income-details')">
                        <i class="fas fa-search mr-2"></i>收支明细查询
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div id="content-area">
                <!-- 财务仪表板 -->
                <div id="dashboard-content" class="space-y-6">
                    <!-- KPI 指标卡片 -->
                    <div class="grid grid-cols-4 gap-6">
                        <div class="kpi-card bg-white p-6 rounded-lg">
                            <div class="ant-statistic">
                                <div class="ant-statistic-title">今日收入</div>
                                <div class="ant-statistic-content" style="color: #3f8600;">
                                    ¥1050
                                </div>
                                <div class="text-xs text-gray-500 mt-1">较昨日 +12.5%</div>
                            </div>
                        </div>
                        <div class="kpi-card bg-white p-6 rounded-lg">
                            <div class="ant-statistic">
                                <div class="ant-statistic-title">本月收入</div>
                                <div class="ant-statistic-content" style="color: #1890ff;">
                                    ¥47280
                                </div>
                                <div class="text-xs text-gray-500 mt-1">较上月 +8.3%</div>
                            </div>
                        </div>
                        <div class="kpi-card bg-white p-6 rounded-lg">
                            <div class="ant-statistic">
                                <div class="ant-statistic-title">利润率</div>
                                <div class="ant-statistic-content" style="color: #722ed1;">
                                    23.8%
                                </div>
                            </div>
                        </div>
                        <div class="kpi-card bg-white p-6 rounded-lg">
                            <div class="ant-statistic">
                                <div class="ant-statistic-title">完成订单</div>
                                <div class="ant-statistic-content" style="color: #fa8c16;">
                                    156
                                </div>
                                <div class="text-xs text-gray-500 mt-1">本月累计</div>
                            </div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="grid grid-cols-2 gap-6">
                        <div class="bg-white p-6 rounded-lg">
                            <h3 class="text-lg font-medium mb-4">收入趋势分析</h3>
                            <div id="revenue-chart" class="chart-container"></div>
                        </div>
                        <div class="bg-white p-6 rounded-lg">
                            <h3 class="text-lg font-medium mb-4">成本构成分析</h3>
                            <div id="cost-chart" class="chart-container"></div>
                        </div>
                    </div>

                    <!-- 司机绩效和车辆效益 -->
                    <div class="grid grid-cols-2 gap-6">
                        <div class="bg-white p-6 rounded-lg">
                            <h3 class="text-lg font-medium mb-4">司机绩效排行</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center space-x-3">
                                        <div class="driver-rank rank-1">1</div>
                                        <div>
                                            <div class="font-medium">王勇</div>
                                            <div class="text-xs text-gray-500">皖E555324</div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="font-semibold text-green-600">¥6220</div>
                                        <div class="text-xs text-gray-500">35单</div>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center space-x-3">
                                        <div class="driver-rank rank-2">2</div>
                                        <div>
                                            <div class="font-medium">张伟</div>
                                            <div class="text-xs text-gray-500">皖E555322</div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="font-semibold text-green-600">¥6030</div>
                                        <div class="text-xs text-gray-500">32单</div>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center space-x-3">
                                        <div class="driver-rank rank-3">3</div>
                                        <div>
                                            <div class="font-medium">李强</div>
                                            <div class="text-xs text-gray-500">皖E555323</div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="font-semibold text-green-600">¥5850</div>
                                        <div class="text-xs text-gray-500">29单</div>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center space-x-3">
                                        <div class="driver-rank rank-4">4</div>
                                        <div>
                                            <div class="font-medium">赵明</div>
                                            <div class="text-xs text-gray-500">皖E555325</div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="font-semibold text-green-600">¥5630</div>
                                        <div class="text-xs text-gray-500">24单</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white p-6 rounded-lg">
                            <h3 class="text-lg font-medium mb-4">车辆效益对比</h3>
                            <div id="vehicle-chart" class="chart-container"></div>
                        </div>
                    </div>
                </div>

                <!-- 订单收费统计 -->
                <div id="order-stats-content" class="space-y-6 hidden">
                    <div class="bg-white p-6 rounded-lg">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">订单收费统计</h3>
                            <div class="query-bar">
                                <div class="query-item">
                                    <input type="date" class="custom-date-picker" placeholder="开始日期">
                                </div>
                                <div class="query-item">
                                    <input type="date" class="custom-date-picker" placeholder="结束日期">
                                </div>
                                <div class="query-item">
                                    <select class="custom-select" style="width: 80px;">
                                        <option value="all">全部</option>
                                        <option value="completed">已完成</option>
                                        <option value="ongoing">进行中</option>
                                    </select>
                                </div>
                                <button class="ant-btn ant-btn-primary ant-btn-sm">
                                    <i class="fas fa-search"></i> 查询
                                </button>
                                <button class="ant-btn ant-btn-sm">
                                    <i class="fas fa-download"></i> 导出
                                </button>
                            </div>
                        </div>
                        <div class="grid grid-cols-4 gap-4 mb-4">
                            <div class="text-center p-4 bg-blue-50 rounded-lg">
                                <div class="text-2xl font-bold text-blue-600">¥47,280</div>
                                <div class="text-sm text-gray-600">本月总收入</div>
                            </div>
                            <div class="text-center p-4 bg-green-50 rounded-lg">
                                <div class="text-2xl font-bold text-green-600">156</div>
                                <div class="text-sm text-gray-600">完成订单数</div>
                            </div>
                            <div class="text-center p-4 bg-orange-50 rounded-lg">
                                <div class="text-2xl font-bold text-orange-600">¥303</div>
                                <div class="text-sm text-gray-600">平均订单金额</div>
                            </div>
                            <div class="text-center p-4 bg-purple-50 rounded-lg">
                                <div class="text-2xl font-bold text-purple-600">8.3%</div>
                                <div class="text-sm text-gray-600">环比增长率</div>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="ant-table w-full">
                                <thead class="ant-table-thead">
                                    <tr>
                                        <th class="ant-table-cell">订单编号</th>
                                        <th class="ant-table-cell">车辆</th>
                                        <th class="ant-table-cell">司机</th>
                                        <th class="ant-table-cell">陪护人员</th>
                                        <th class="ant-table-cell">医护人员</th>
                                        <th class="ant-table-cell">路线</th>
                                        <th class="ant-table-cell">金额</th>
                                        <th class="ant-table-cell">状态</th>
                                        <th class="ant-table-cell">日期</th>
                                        <th class="ant-table-cell">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="ant-table-tbody">
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">ORD20241005001</td>
                                        <td class="ant-table-cell">皖E555322</td>
                                        <td class="ant-table-cell">张伟</td>
                                        <td class="ant-table-cell">刘芳</td>
                                        <td class="ant-table-cell">陈鲁豫</td>
                                        <td class="ant-table-cell">马鞍山市人民医院 → 安徽医科大学第二附属医院</td>
                                        <td class="ant-table-cell">¥350</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">已完成</span></td>
                                        <td class="ant-table-cell">2024-10-05</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">ORD20241005002</td>
                                        <td class="ant-table-cell">皖E555323</td>
                                        <td class="ant-table-cell">李强</td>
                                        <td class="ant-table-cell">王丽</td>
                                        <td class="ant-table-cell">-</td>
                                        <td class="ant-table-cell">马鞍山市中医院 → 南京军区总医院</td>
                                        <td class="ant-table-cell">¥280</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-blue">进行中</span></td>
                                        <td class="ant-table-cell">2024-10-05</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">ORD20241005003</td>
                                        <td class="ant-table-cell">皖E555324</td>
                                        <td class="ant-table-cell">王勇</td>
                                        <td class="ant-table-cell">-</td>
                                        <td class="ant-table-cell">李天意</td>
                                        <td class="ant-table-cell">马鞍山市第四人民医院 → 上海华山医院</td>
                                        <td class="ant-table-cell">¥420</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">已完成</span></td>
                                        <td class="ant-table-cell">2024-10-05</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">ORD20241005004</td>
                                        <td class="ant-table-cell">皖E555325</td>
                                        <td class="ant-table-cell">赵明</td>
                                        <td class="ant-table-cell">张敏</td>
                                        <td class="ant-table-cell">王小丽</td>
                                        <td class="ant-table-cell">含山县人民医院 → 马鞍山市人民医院</td>
                                        <td class="ant-table-cell">¥320</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">已完成</span></td>
                                        <td class="ant-table-cell">2024-10-04</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">ORD20241005005</td>
                                        <td class="ant-table-cell">皖E555322</td>
                                        <td class="ant-table-cell">张伟</td>
                                        <td class="ant-table-cell">赵静</td>
                                        <td class="ant-table-cell">-</td>
                                        <td class="ant-table-cell">马鞍山市妇幼保健院 → 安徽省儿童医院</td>
                                        <td class="ant-table-cell">¥380</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">已完成</span></td>
                                        <td class="ant-table-cell">2024-10-03</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">ORD20241005006</td>
                                        <td class="ant-table-cell">皖E555323</td>
                                        <td class="ant-table-cell">李强</td>
                                        <td class="ant-table-cell">-</td>
                                        <td class="ant-table-cell">-</td>
                                        <td class="ant-table-cell">马鞍山市中心医院 → 南京鼓楼医院</td>
                                        <td class="ant-table-cell">¥260</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">已完成</span></td>
                                        <td class="ant-table-cell">2024-10-03</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 车辆运营成本 -->
                <div id="vehicle-cost-content" class="space-y-6 hidden">
                    <div class="bg-white p-6 rounded-lg">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">车辆运营成本分析</h3>
                            <div class="query-bar">
                                <select class="custom-select" style="width: 120px;">
                                    <option value="2024-10">2024年10月</option>
                                    <option value="2024-09">2024年9月</option>
                                    <option value="2024-08">2024年8月</option>
                                </select>
                                <button class="ant-btn ant-btn-primary ant-btn-sm">
                                    <i class="fas fa-chart-bar"></i> 成本分析
                                </button>
                                <button class="ant-btn ant-btn-sm">
                                    <i class="fas fa-download"></i> 导出报告
                                </button>
                            </div>
                        </div>
                        <div class="grid grid-cols-4 gap-4 mb-4">
                            <div class="text-center p-4 bg-red-50 rounded-lg">
                                <div class="text-2xl font-bold text-red-600">¥19,670</div>
                                <div class="text-sm text-gray-600">本月总成本</div>
                            </div>
                            <div class="text-center p-4 bg-blue-50 rounded-lg">
                                <div class="text-2xl font-bold text-blue-600">¥47,300</div>
                                <div class="text-sm text-gray-600">本月总收入</div>
                            </div>
                            <div class="text-center p-4 bg-green-50 rounded-lg">
                                <div class="text-2xl font-bold text-green-600">58.4%</div>
                                <div class="text-sm text-gray-600">利润率</div>
                            </div>
                            <div class="text-center p-4 bg-orange-50 rounded-lg">
                                <div class="text-2xl font-bold text-orange-600">12,380</div>
                                <div class="text-sm text-gray-600">总里程数(km)</div>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="ant-table w-full">
                                <thead class="ant-table-thead">
                                    <tr>
                                        <th class="ant-table-cell">车辆</th>
                                        <th class="ant-table-cell">燃料费</th>
                                        <th class="ant-table-cell">维护费</th>
                                        <th class="ant-table-cell">保险费</th>
                                        <th class="ant-table-cell">折旧费</th>
                                        <th class="ant-table-cell">其他费用</th>
                                        <th class="ant-table-cell">总成本</th>
                                        <th class="ant-table-cell">里程数</th>
                                        <th class="ant-table-cell">收入</th>
                                        <th class="ant-table-cell">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="ant-table-tbody">
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">皖E555322</td>
                                        <td class="ant-table-cell">¥2800</td>
                                        <td class="ant-table-cell">¥450</td>
                                        <td class="ant-table-cell">¥380</td>
                                        <td class="ant-table-cell">¥1200</td>
                                        <td class="ant-table-cell">¥180</td>
                                        <td class="ant-table-cell font-semibold text-red-600">¥5010</td>
                                        <td class="ant-table-cell">3200km</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥12500</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 分析</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 调整</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">皖E555323</td>
                                        <td class="ant-table-cell">¥2650</td>
                                        <td class="ant-table-cell">¥320</td>
                                        <td class="ant-table-cell">¥380</td>
                                        <td class="ant-table-cell">¥1200</td>
                                        <td class="ant-table-cell">¥150</td>
                                        <td class="ant-table-cell font-semibold text-red-600">¥4700</td>
                                        <td class="ant-table-cell">2980km</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥11200</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 分析</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 调整</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">皖E555324</td>
                                        <td class="ant-table-cell">¥3100</td>
                                        <td class="ant-table-cell">¥680</td>
                                        <td class="ant-table-cell">¥380</td>
                                        <td class="ant-table-cell">¥1200</td>
                                        <td class="ant-table-cell">¥220</td>
                                        <td class="ant-table-cell font-semibold text-red-600">¥5580</td>
                                        <td class="ant-table-cell">3500km</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥13800</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 分析</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 调整</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">皖E555325</td>
                                        <td class="ant-table-cell">¥2400</td>
                                        <td class="ant-table-cell">¥280</td>
                                        <td class="ant-table-cell">¥380</td>
                                        <td class="ant-table-cell">¥1200</td>
                                        <td class="ant-table-cell">¥120</td>
                                        <td class="ant-table-cell font-semibold text-red-600">¥4380</td>
                                        <td class="ant-table-cell">2700km</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥9800</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 分析</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-edit"></i> 调整</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 收支明细查询 -->
                <div id="income-details-content" class="space-y-6 hidden">
                    <div class="bg-white p-6 rounded-lg">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">收支明细查询</h3>
                            <div class="query-bar">
                                <div class="query-item">
                                    <input type="date" class="custom-date-picker" placeholder="开始日期">
                                </div>
                                <div class="query-item">
                                    <input type="date" class="custom-date-picker" placeholder="结束日期">
                                </div>
                                <div class="query-item">
                                    <select class="custom-select" style="width: 80px;">
                                        <option value="all">全部</option>
                                        <option value="income">收入</option>
                                        <option value="expense">支出</option>
                                    </select>
                                </div>
                                <div class="query-item">
                                    <div class="custom-search">
                                        <input type="text" placeholder="搜索订单号、车辆">
                                        <button type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                <button class="ant-btn ant-btn-sm">
                                    <i class="fas fa-filter"></i> 高级筛选
                                </button>
                                <button class="ant-btn ant-btn-sm">
                                    <i class="fas fa-download"></i> 导出明细
                                </button>
                            </div>
                        </div>
                        <div class="grid grid-cols-4 gap-4 mb-4">
                            <div class="text-center p-4 bg-green-50 rounded-lg">
                                <div class="text-2xl font-bold text-green-600">¥48,330</div>
                                <div class="text-sm text-gray-600">总收入</div>
                            </div>
                            <div class="text-center p-4 bg-red-50 rounded-lg">
                                <div class="text-2xl font-bold text-red-600">¥23,400</div>
                                <div class="text-sm text-gray-600">总支出</div>
                            </div>
                            <div class="text-center p-4 bg-blue-50 rounded-lg">
                                <div class="text-2xl font-bold text-blue-600">¥24,930</div>
                                <div class="text-sm text-gray-600">净利润</div>
                            </div>
                            <div class="text-center p-4 bg-orange-50 rounded-lg">
                                <div class="text-2xl font-bold text-orange-600">159</div>
                                <div class="text-sm text-gray-600">交易笔数</div>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="ant-table w-full">
                                <thead class="ant-table-thead">
                                    <tr>
                                        <th class="ant-table-cell">日期</th>
                                        <th class="ant-table-cell">类型</th>
                                        <th class="ant-table-cell">订单编号</th>
                                        <th class="ant-table-cell">车辆</th>
                                        <th class="ant-table-cell">金额</th>
                                        <th class="ant-table-cell">描述</th>
                                        <th class="ant-table-cell">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="ant-table-tbody">
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">2024-10-05</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">订单收入</span></td>
                                        <td class="ant-table-cell">ORD20241005001</td>
                                        <td class="ant-table-cell">皖E555322</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥350</td>
                                        <td class="ant-table-cell">非急救转运服务费</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">2024-10-05</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">订单收入</span></td>
                                        <td class="ant-table-cell">ORD20241005002</td>
                                        <td class="ant-table-cell">皖E555323</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥280</td>
                                        <td class="ant-table-cell">非急救转运服务费</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">2024-10-05</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-blue">其他收入</span></td>
                                        <td class="ant-table-cell">-</td>
                                        <td class="ant-table-cell">-</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥50</td>
                                        <td class="ant-table-cell">设备租赁费</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        </td>
                                    </tr>
                                    <tr class="ant-table-row">
                                        <td class="ant-table-cell">2024-10-04</td>
                                        <td class="ant-table-cell"><span class="ant-tag ant-tag-green">订单收入</span></td>
                                        <td class="ant-table-cell">ORD20241004001</td>
                                        <td class="ant-table-cell">皖E555325</td>
                                        <td class="ant-table-cell font-semibold text-green-600">¥320</td>
                                        <td class="ant-table-cell">非急救转运服务费</td>
                                        <td class="ant-table-cell">
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                            <button class="ant-btn ant-btn-link ant-btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增结算模态框 -->
    <div id="salary-modal" class="ant-modal-root hidden">
        <div class="ant-modal-mask" onclick="closeModal()"></div>
        <div class="ant-modal-wrap">
            <div class="ant-modal" style="width: 520px;">
                <div class="ant-modal-content">
                    <div class="ant-modal-header">
                        <div class="ant-modal-title">新增工资结算</div>
                        <button type="button" class="ant-modal-close" onclick="closeModal()">
                            <span class="ant-modal-close-x">
                                <i class="fas fa-times"></i>
                            </span>
                        </button>
                    </div>
                    <div class="ant-modal-body">
                        <form class="ant-form ant-form-vertical">
                            <div class="ant-form-item">
                                <div class="ant-form-item-label">
                                    <label class="ant-form-item-required">司机姓名</label>
                                </div>
                                <div class="ant-form-item-control">
                                    <select class="ant-select ant-select-selector w-full">
                                        <option value="">请选择司机</option>
                                        <option value="张伟">张伟</option>
                                        <option value="李强">李强</option>
                                        <option value="王勇">王勇</option>
                                        <option value="赵明">赵明</option>
                                    </select>
                                </div>
                            </div>
                            <div class="ant-form-item">
                                <div class="ant-form-item-label">
                                    <label class="ant-form-item-required">基本工资</label>
                                </div>
                                <div class="ant-form-item-control">
                                    <div class="ant-input-number ant-input-number-sm w-full">
                                        <div class="ant-input-number-input-wrap">
                                            <input class="ant-input-number-input" placeholder="请输入基本工资" type="number">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-form-item">
                                <div class="ant-form-item-label">
                                    <label>提成金额</label>
                                </div>
                                <div class="ant-form-item-control">
                                    <div class="ant-input-number ant-input-number-sm w-full">
                                        <div class="ant-input-number-input-wrap">
                                            <input class="ant-input-number-input" placeholder="请输入提成金额" type="number">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-form-item">
                                <div class="ant-form-item-label">
                                    <label>奖金金额</label>
                                </div>
                                <div class="ant-form-item-control">
                                    <div class="ant-input-number ant-input-number-sm w-full">
                                        <div class="ant-input-number-input-wrap">
                                            <input class="ant-input-number-input" placeholder="请输入奖金金额" type="number">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-form-item">
                                <div class="ant-form-item-label">
                                    <label>扣款金额</label>
                                </div>
                                <div class="ant-form-item-control">
                                    <div class="ant-input-number ant-input-number-sm w-full">
                                        <div class="ant-input-number-input-wrap">
                                            <input class="ant-input-number-input" placeholder="请输入扣款金额" type="number">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="ant-modal-footer">
                        <button class="ant-btn" onclick="closeModal()">取消</button>
                        <button class="ant-btn ant-btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        function initCharts() {
            // 收入趋势图表
            const revenueChart = echarts.init(document.getElementById('revenue-chart'));
            const revenueOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}<br/>收入: ¥{c}'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '¥{value}'
                    }
                },
                series: [
                    {
                        name: '日收入',
                        type: 'line',
                        smooth: true,
                        data: [850, 920, 1050, 1180, 1050, 980, 1280, 1150, 1320, 1050],
                        itemStyle: {
                            color: '#1890ff'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(24, 144, 255, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(24, 144, 255, 0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            revenueChart.setOption(revenueOption);

            // 成本构成饼图
            const costChart = echarts.init(document.getElementById('cost-chart'));
            const costOption = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}: ¥{c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'middle'
                },
                series: [
                    {
                        name: '成本构成',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['60%', '50%'],
                        data: [
                            { value: 10950, name: '燃料费', itemStyle: { color: '#ff6b6b' } },
                            { value: 1730, name: '维护费', itemStyle: { color: '#4ecdc4' } },
                            { value: 1520, name: '保险费', itemStyle: { color: '#45b7d1' } },
                            { value: 4800, name: '折旧费', itemStyle: { color: '#96ceb4' } },
                            { value: 670, name: '其他费用', itemStyle: { color: '#feca57' } }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            formatter: '{b}\n¥{c}'
                        }
                    }
                ]
            };
            costChart.setOption(costOption);

            // 车辆效益对比图
            const vehicleChart = echarts.init(document.getElementById('vehicle-chart'));
            const vehicleOption = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        let result = params[0].axisValue + '<br/>';
                        params.forEach((param) => {
                            result += param.seriesName + ': ¥' + param.value + '<br/>';
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['收入', '成本', '利润'],
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['皖E555322', '皖E555323', '皖E555324', '皖E555325']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '¥{value}'
                    }
                },
                series: [
                    {
                        name: '收入',
                        type: 'bar',
                        data: [12500, 11200, 13800, 9800],
                        itemStyle: {
                            color: '#52c41a'
                        }
                    },
                    {
                        name: '成本',
                        type: 'bar',
                        data: [5010, 4700, 5580, 4380],
                        itemStyle: {
                            color: '#ff4d4f'
                        }
                    },
                    {
                        name: '利润',
                        type: 'bar',
                        data: [7490, 6500, 8220, 5420],
                        itemStyle: {
                            color: '#1890ff'
                        }
                    }
                ]
            };
            vehicleChart.setOption(vehicleOption);

            // 统一处理窗口大小改变事件
            window.addEventListener('resize', function() {
                revenueChart.resize();
                costChart.resize();
                vehicleChart.resize();
            });
        }

        // 切换标签页
        function switchTab(tab) {
            // 更新导航栏状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active', 'text-blue-700');
                item.classList.add('text-gray-600');
            });
            document.getElementById(`nav-${tab}`).classList.add('active', 'text-blue-700');
            document.getElementById(`nav-${tab}`).classList.remove('text-gray-600');

            // 更新内容区域
            document.querySelectorAll('[id$="-content"]').forEach(content => {
                content.classList.add('hidden');
            });
            document.getElementById(`${tab}-content`).classList.remove('hidden');

            // 如果切换到仪表板，重新初始化图表
            if (tab === 'dashboard') {
                setTimeout(initCharts, 100);
            }
        }

        // 打开模态框
        function openModal() {
            document.getElementById('salary-modal').classList.remove('hidden');
        }

        // 关闭模态框
        function closeModal() {
            document.getElementById('salary-modal').classList.add('hidden');
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
        });
    </script>
</body>
</html>